<template>
  <div class="allOrderContainer">
    <!-- 订单操作 -->
    <div class="actions">
      <div class="left">
        <el-button
          v-permission="'authorized_start_create'"
          type="primary"
          plain
          size="mini"
          data-tracker="P45-1"
          @click="AddOpenplatFormFn"
          style="margin: 0px 10px 10px 0px"
          ><i class="el-icon-plus"></i> 新增</el-button
        >
        <el-button
          v-permission="'authorized_stop_update'"
          type="primary"
          plain
          size="mini"
          data-tracker="P45-2"
          @click="AuthorizedStopUpdateFn"
          style="margin: 0px 10px 10px 0px"
          >停用</el-button
        >
        <el-button
          v-permission="'authorized_start_update'"
          type="primary"
          plain
          size="mini"
          data-tracker="P45-3"
          @click="AuthorizedStartUpdateFn"
          style="margin: 0px 10px 10px 0px"
          >启用</el-button
        >
        <el-button
          v-permission="'authorized_reset_update'"
          type="primary"
          plain
          size="mini"
          data-tracker="P45-4"
          @click="AuthorizedResetFn"
          style="margin: 0px 10px 10px 0px"
          >重置</el-button
        >
      </div>
      <div class="right">
        <el-pagination
          background
          small
          :current-page="pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalListNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <el-table
      :max-height="maxheight"
      :data="tableAuthorizedData"
      border
      stripe
      style="width: 100%"
      ref="multipleTableList"
      @selection-change="handleListSelectionChange"
    >
      <el-table-column type="index" label="序号" width="55"> </el-table-column>
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="name" label="名称" width="180"> </el-table-column>
      <el-table-column prop="phone" label="电话" width="180"> </el-table-column>
      <el-table-column prop="is_used" label="是否启用" width="100">
        <template slot-scope="scope">
          {{ scope.row.is_used === "0" ? "启用" : "停用" }}
        </template>
      </el-table-column>
      <el-table-column prop="valid_time" label="有效时间" width="180">
        <template slot-scope="scope">
          {{
            scope.row.valid_time === "0"
              ? ""
              : new Date(Number(scope.row.valid_time) * 1000).toLocaleString()
          }}
        </template>
      </el-table-column>
      <el-table-column prop="company_name" label="公司名称"> </el-table-column>
      <el-table-column prop="remark" label="描述"> </el-table-column>
      <el-table-column prop="opt" label="操作" width="120">
        <template slot-scope="scope">
          <el-button
            v-permission="'authorized_detail'"
            type="text"
            size="mini"
            data-tracker="P45-5"
            @click="AuthorizedDetailFn(scope.row)"
            >详情</el-button
          >
          <el-button
            v-permission="'authorized_update'"
            type="text"
            size="mini"
            data-tracker="P45-6"
            @click="AuthorizedUpdateFn(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="新增对外开放平台API密匙"
      :close-on-click-modal="false"
      :visible.sync="AddcenterDialogVisible"
      width="40%"
    >
      <el-form
        :model="ruleFormAdd"
        status-icon
        :rules="rulesAdd"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        style="width: 100%"
      >
        <el-form-item label="名称" prop="dataAddname">
          <el-input
            type="text"
            v-model="ruleFormAdd.dataAddname"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="dataAddPhone">
          <el-input
            type="text"
            v-model="ruleFormAdd.dataAddPhone"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="有效时间" prop="dataAddTime">
          <el-date-picker
            v-model="ruleFormAdd.dataAddTime"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="平台ID" prop="dataAddSassId">
          <el-select
            type="text"
            v-model="ruleFormAdd.dataAddSassId"
            autocomplete="off"
          >
            <el-option
              v-for="item in sassDataList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="公司名称" prop="dataAddCompany">
          <el-input v-model.number="ruleFormAdd.dataAddCompany"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="dataAddRemark">
          <el-input v-model.number="ruleFormAdd.dataAddRemark"></el-input>
        </el-form-item>
      </el-form>
      <div style="height: 20px"></div>
      <el-table
        ref="multipleTableAdd"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="index" label="序号" width="55">
        </el-table-column>
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="remark" label="API名称" width="220">
        </el-table-column>
        <el-table-column prop="method" label="POST" width="150">
        </el-table-column>
        <el-table-column prop="api" label="URL地址"> </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="AddcenterDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="AddFn0penplatformFn">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title=" 对外开放平台API密匙详情"
      :close-on-click-modal="false"
      :visible.sync="DetailcenterDialogVisible"
      :before-close="handleClose"
      width="40%"
    >
      <el-form
        :model="ruleFormDeatil"
        status-icon
        :rules="rulesDetail"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        style="width: 100%"
      >
        <el-form-item label="名称" prop="dataDetailname">
          <el-input
            type="text"
            v-model="ruleFormDeatil.dataDetailname"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="dataDetailPhone">
          <el-input
            type="text"
            v-model="ruleFormDeatil.dataDetailPhone"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="有效时间" prop="dataDetailTime">
          <el-date-picker
            disabled
            v-model="ruleFormDeatil.dataDetailTime"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="平台ID" prop="dataDetailSassId">
          <el-select
            disabled
            type="text"
            v-model="ruleFormDeatil.dataDetailSassId"
            autocomplete="off"
          >
            <el-option
              v-for="item in sassDataList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="公司名称" prop="dataDetailCompany">
          <el-input
            v-model.number="ruleFormDeatil.dataDetailCompany"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="dataDetailRemark">
          <el-input
            v-model.number="ruleFormDeatil.dataDetailRemark"
            disabled
          ></el-input>
        </el-form-item>
      </el-form>
      <div style="height: 20px"></div>
      <el-table
        ref="multipleTableDetail"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleDetailSelectionChange"
      >
        <el-table-column type="index" label="序号" width="55">
        </el-table-column>
        <el-table-column :selectable="() => false" type="selection" width="55">
        </el-table-column>
        <el-table-column prop="remark" label="API名称" width="220">
        </el-table-column>
        <el-table-column prop="method" label="POST" width="150">
        </el-table-column>
        <el-table-column prop="api" label="URL地址"> </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
      title="编辑对外开放平台API密匙"
      :close-on-click-modal="false"
      :visible.sync="EditcenterDialogVisible"
      width="40%"
    >
      <el-form
        :model="ruleFormEdit"
        status-icon
        :rules="rulesEdit"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        style="width: 100%"
      >
        <el-form-item label="名称" prop="dataEditname">
          <el-input
            type="text"
            v-model="ruleFormEdit.dataEditname"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="dataEditPhone">
          <el-input
            type="text"
            v-model="ruleFormEdit.dataEditPhone"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="有效时间" prop="dataEditTime">
          <el-date-picker
            v-model="ruleFormEdit.dataEditTime"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="平台ID" prop="dataEditSassId">
          <el-select
            type="text"
            v-model="ruleFormEdit.dataEditSassId"
            autocomplete="off"
          >
            <el-option
              v-for="item in sassDataList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="公司名称" prop="dataAddCompany">
          <el-input v-model.number="ruleFormEdit.dataEditCompany"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="dataAddRemark">
          <el-input v-model.number="ruleFormEdit.dataEditRemark"></el-input>
        </el-form-item>
      </el-form>
      <div style="height: 20px"></div>
      <el-table
        ref="multipleTableEdit"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleEditSelectionChange"
      >
        <el-table-column type="index" label="序号" width="55">
        </el-table-column>
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="remark" label="API名称" width="220">
        </el-table-column>
        <el-table-column prop="method" label="POST" width="150">
        </el-table-column>
        <el-table-column prop="api" label="URL地址"> </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="EditcenterDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="EditFn0penplatformFn"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  SaasCompanyList,
  AuthorizedApiList,
  AuthorizedList,
  AuthorizedCreate,
  AuthorizedDetail,
  AuthorizedUpdate,
  AuthorizedStartUpdate,
  AuthorizedStopUpdate,
  AuthorizedResetUpdate,
} from "@/api/openplatform";
export default {
  name: "openplatform",
  data() {
    return {
      AddcenterDialogVisible: false,
      DetailcenterDialogVisible: false,
      EditcenterDialogVisible: false,
      pageNum: 1, //目前在第几页
      totalListNum: 100, //列表总数
      pageSize: 20, //一页多少条
      ruleFormAdd: {
        dataAddname: "",
        dataAddPhone: "",
        dataAddTime: "",
        dataAddSassId: "",
        dataAddCompany: "",
        dataAddRemark: "",
      },
      rulesAdd: {},
      ruleFormDeatil: {
        dataDetailname: "",
        dataDetailPhone: "",
        dataDetailTime: "",
        dataDetailSassId: "",
        dataDetailCompany: "",
        dataDetailRemark: "",
      },
      rulesDetail: {},
      ruleFormEdit: {
        dataEditname: "",
        dataEditPhone: "",
        dataEditTime: "",
        dataEditSassId: "",
        dataEditCompany: "",
        dataEditRemark: "",
      },
      rulesEdit: {},
      tableData: [],
      multipleAddSelection: [],
      multipleListSelection: [],
      multipleEditSelection: [],
      multipleDetailSelection: [],
      tableAuthorizedData: [],
      maxheight: "auto",
      arrayDataId: [],
      sassDataList: [],
      dataArray: [],
      updateId: "",
      ListDataId: "",
    };
  },
  computed: {},
  created() {
    this.SaasCompanyListFn();
  },
  mounted() {
    this.AuthorizedApiListFn();
    this.AuthorizedListFn();
  },
  //   watch:{
  //       tableData(){
  //           this.$nextTick(()=>{
  //               for(const item of this.tableData){
  //                   // console.log(this.$refs,2222222222)
  //                   this.$refs.multipleTable.toggleRowSelection(item,true)
  //               }
  //           })
  //       }
  //   },
  methods: {
    handleListSelectionChange(val) {
      this.multipleListSelection = val;
      if (val.length > 0) {
        for (var i = 0; i < this.multipleListSelection.length; i++) {
          this.ListDataId = this.multipleListSelection.map((item) =>
            Number(item.id)
          );
        }
      } else {
        this.ListDataId = [];
      }
    },
    //重置按钮函数API
    AuthorizedResetFn() {
      if (this.multipleListSelection.length === 1) {
        const dataId = {
          id: this.ListDataId.toString(),
        };
        AuthorizedResetUpdate(dataId).then((res) => {
          if (res.code === 10000) {
            this.$message({
              type: "success",
              message: "重置成功!",
            });
            this.AuthorizedListFn(this.pageNum, this.pageSize);
          }
        });
      } else {
        this.$message({
          type: "error",
          message: "最多选中一项需要重置的数据!",
        });
      }
      AuthorizedResetUpdate(dataId).then((res) => {
        if (res.code === 10000) {
          this.$message({
            type: "success",
            message: "重置成功!",
          });
          this.AuthorizedListFn(this.pageNum, this.pageSize);
        }
      });
    },
    //启用函数API
    AuthorizedStartUpdateFn() {
      if (this.multipleListSelection.length === 1) {
        const dataId = {
          id: this.ListDataId.toString(),
        };
        AuthorizedStartUpdate(dataId).then((res) => {
          if (res.code === 10000) {
            this.$message({
              type: "success",
              message: "启用成功!",
            });
            this.AuthorizedListFn(this.pageNum, this.pageSize);
          }
        });
      } else {
        this.$message({
          type: "error",
          message: "最多选中一项需要启用数据!",
        });
      }
    },
    //停用函数API
    AuthorizedStopUpdateFn() {
      if (this.multipleListSelection.length === 1) {
        const dataId = {
          id: this.ListDataId.toString(),
        };
        AuthorizedStopUpdate(dataId).then((res) => {
          if (res.code === 10000) {
            this.$message({
              type: "success",
              message: "启用成功!",
            });
            this.AuthorizedListFn(this.pageNum, this.pageSize);
          }
        });
      } else {
        this.$message({
          type: "error",
          message: "最多选中一项需要停用数据!",
        });
      }
    },
    //平台iD接口
    SaasCompanyListFn() {
      const data = {
        page: 1,
        page_size: 10,
      };
      SaasCompanyList(data).then((res) => {
        if (res.code === 10000) {
          this.sassDataList = res.data.list;
        }
      });
    },
    //创建 对外开放平台API密匙
    AddOpenplatFormFn() {
      this.AddcenterDialogVisible = true;
    },
    handleSelectionChange(val) {
      this.multipleAddSelection = val;
      for (var i = 0; i < this.multipleAddSelection.length; i++) {
        this.arrayDataId.push(Number(this.multipleAddSelection[i].id));
      }

      let dataSet = new Set(this.arrayDataId);
      this.arrayDataId = Array.from(dataSet);
    },
    //创建保存
    AddFn0penplatformFn() {
      const data = {
        name: this.ruleFormAdd.dataAddname,
        phone: this.ruleFormAdd.dataAddPhone.toString(),
        valid_time: new Date(Number(this.ruleFormAdd.dataAddTime) / 1000)
          .getTime()
          .toString(),
        api_id_list: this.arrayDataId,
        remark: this.ruleFormAdd.dataAddRemark,
        saas_company_id: this.ruleFormAdd.dataAddSassId.toString(),
        company_name: this.ruleFormAdd.dataAddCompany,
      };
      AuthorizedCreate(data).then((res) => {
        if (res.code === 10000) {
          this.$message({
            type: "success",
            message: "创建API密匙成功",
          });
          this.AddcenterDialogVisible = false;
          this.AuthorizedListFn(this.pageNum, this.pageSize);
        }
      });
    },
    //创建界面 API 列表
    AuthorizedApiListFn() {
      const data = {};
      AuthorizedApiList(data).then((res) => {
        if (res.code === 10000) {
          this.tableData = res.data;
        }
      });
    },
    //详情
    handleDetailSelectionChange(val) {
      this.multipleDetailSelection = val;
    },
    //详情界面接口
    AuthorizedDetailFn(value) {
      this.DetailcenterDialogVisible = true;
      const data = {
        id: value.id,
      };
      AuthorizedDetail(data).then((res) => {
        if (res.code === 10000) {
          this.ruleFormDeatil.dataDetailname = res.data.name;
          this.ruleFormDeatil.dataDetailPhone = res.data.phone;
          this.ruleFormDeatil.dataDetailTime = res.data.valid_time * 1000;
          this.ruleFormDeatil.dataDetailSassId = Number(
            res.data.saas_company_id
          );
          this.ruleFormDeatil.dataDetailCompany = res.data.company_name;
          this.ruleFormDeatil.dataDetailRemark = res.data.remark;
          if (
            res.data.api_list !== null &&
            res.data.api_list.length > 0 &&
            res.data.api_list
          ) {
            this.$nextTick(() => {
              // res.data.api_list.forEach((row) => {
              //   this.$refs.multipleTableDetail.toggleRowSelection(row, true)
              // });
              const ids = res.data.api_list.map((item) => item.id);
              for (const item of this.tableData) {
                if (ids.includes(item.id)) {
                  this.$refs.multipleTableDetail.toggleRowSelection(item, true);
                  // console.log(this.$refs.multipleTableDetail);
                }
              }
            });
          }
        }
      });
    },
    handleClose() {
      this.DetailcenterDialogVisible = false;
    },
    handleEditSelectionChange(val) {
      this.multipleEditSelection = val;
      for (var i = 0; i < this.multipleEditSelection.length; i++) {
        this.dataArray.push(Number(this.multipleEditSelection[i].id));
      }

      let dataSet = new Set(this.dataArray);
      this.dataArray = Array.from(dataSet);
    },
    //编辑密匙函数
    AuthorizedUpdateFn(val) {
      this.EditcenterDialogVisible = true;
      this.updateId = val.id;
      const data = {
        id: val.id,
      };
      AuthorizedDetail(data).then((res) => {
        if (res.code === 10000) {
          this.ruleFormEdit.dataEditname = res.data.name;
          this.ruleFormEdit.dataEditPhone = res.data.phone;
          this.ruleFormEdit.dataEditTime = res.data.valid_time * 1000;
          this.ruleFormEdit.dataEditSassId = Number(res.data.saas_company_id);
          this.ruleFormEdit.dataEditCompany = res.data.company_name;
          this.ruleFormEdit.dataEditRemark = res.data.remark;
          if (
            res.data.api_list !== null &&
            res.data.api_list.length > 0 &&
            res.data.api_list
          ) {
            this.$nextTick(() => {
              const ids = res.data.api_list.map((item) => item.id);
              for (const item of this.tableData) {
                if (ids.includes(item.id)) {
                  this.$refs.multipleTableEdit.toggleRowSelection(item, true);
                }
              }
            });
          }
        }
      });
    },
    //编辑保存函数API
    EditFn0penplatformFn() {
      const data = {
        id: this.updateId,
        name: this.ruleFormEdit.dataEditname,
        phone: this.ruleFormEdit.dataEditPhone.toString(),
        valid_time: new Date(Number(this.ruleFormEdit.dataEditTime) / 1000)
          .getTime()
          .toString(),
        api_id_list: this.dataArray,
        remark: this.ruleFormEdit.dataEditRemark,
        saas_company_id: this.ruleFormEdit.dataEditSassId.toString(),
        company_name: this.ruleFormEdit.dataEditCompany,
      };
      AuthorizedUpdate(data).then((res) => {
        if (res.code === 10000) {
          this.$message({
            type: "success",
            message: "修改API密匙成功",
          });
          this.EditcenterDialogVisible = false;
          this.AuthorizedListFn(this.pageNum, this.pageSize);
        }
      });
    },
    //对外平台密匙列表 翻页
    handleSizeChange(val) {
      this.pageSize = val; //一页多少条
      this.AuthorizedListFn(this.pageNum, this.pageSize);
    },
    //对外平台密匙列表 翻页
    handleCurrentChange(val) {
      this.pageNum = val; //第多少页
      this.AuthorizedListFn(this.pageNum, this.pageSize);
    },
    //对外平台密匙列表
    AuthorizedListFn(pageNumval, pageSizeval) {
      const data = {
        page: pageNumval,
        page_siaze: pageSizeval,
      };
      AuthorizedList(data).then((res) => {
        if (res.code === 10000) {
          this.tableAuthorizedData = res.data.list;
          if (this.tableAuthorizedData.length > 6) {
            //一排操作栏
            this.maxheight = document.documentElement.clientHeight - 245;
          } else {
            this.maxheight = "auto";
          }
          this.pageNum = res.data.page;
          this.totalListNum = res.data.total;
          this.pageSize = res.data.page_size;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.allOrderContainer {
  padding: 10px 15px;
  background-color: #fff;

  .actions {
    display: flex;
    justify-content: space-between;
    background-color: #fff;

    .right {
      margin: 0px 0px 10px 0px;
      ::v-deep .el-pagination {
        display: inline-block;

        .el-input--mini .el-input__inner {
          height: 24px;
        }
      }
    }
  }
}
</style>
